<script setup lang="ts">
import { computed, Reactive } from "vue"
import {ElForm,ElFormItem,ElInput,ElSelectV2} from "element-plus"
import Nifi from "src/nifi";
import {t} from "../../i18n/index"
const {nifi,model} = defineProps<{nifi:Nifi,model:Reactive<any>}>();

const options = computed(() => nifi.flow.parameterContexts?.map((d:any) => ({label:d.component.name,value:d.id})))

</script>

<template>
    <div class="flex flex-col w-full h-full">
        <ElForm :model="model" class="w-full" label-position="top">
            <ElFormItem :label="t('param-config-name-label')" prop="name">
                <ElInput v-model="model.name"  ></ElInput>
            </ElFormItem>
  
            <ElFormItem :label="t('param-config-inherite-label')">
                <ElSelectV2 v-model="model.inheritedParameterContexts" :options="options" multiple collapse-tags :teleported="false" ></ElSelectV2>
            </ElFormItem>

            <ElFormItem :label="t('param-config-desc-label')" prop="description">
                <ElInput v-model="model.description" ></ElInput>
            </ElFormItem>
            
        </ElForm>
        <div class="flex-1 overflow-hidden">
            <fieldset class="flex-1 overflow-hidden  p-12 p-t-2 rd-4 b-gray-300 b-solid">
                <legend>{{t('param-config-comps-legend')}}</legend>
                <div class="h-full flex flex-col">
                    <fieldset class="flex-1 overflow-hidden p-12 p-t-2 rd-4 b-gray-300 b-solid">
                        <legend>{{t('param-config-group-legend')}}</legend>
                    </fieldset>
                </div>
            </fieldset>
        </div>
    </div>
</template>